import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { createForm } from "rc-form";
import { Tabs } from "antd";
import { push, goBack } from "react-router-redux";
import { add } from "../../actions";
import style from "./style.less";
import Bottom from "../../components/UserBottom";
import Header from "../../components/UserHeader";
import LoginCard from "../../components/LoginCard";
import LoginCode from "../../components/LoginCode";
import register_bg from "../../assets/images/register_bg.png";
const TabPane = Tabs.TabPane;

class Login extends PureComponent {
  state = {};

  onSignUp() {
    this.props.navigateTo("/signup");
  }

  onIncrementAsync = payload => {
    this.props.add({ num: payload });
  };

  componentDidMount() {
    // console.log(this.props);
  }

  render() {
    return (
      <div className={style.text}>
        <Header title="登录" type="1" />
        <div
          className={style.body}
          style={{
            background: `url(${register_bg}) left center/ cover no-repeat`
          }}
        >
          <div className={style.connent}>
            <div className={style.loginCard}>
              <Tabs defaultActiveKey="1" className={style.tab}>
                <TabPane tab="密码登录" key="1">
                  <LoginCard />
                </TabPane>
                <TabPane tab="验证码登录" key="2">
                  <LoginCode />
                </TabPane>
              </Tabs>
            </div>
          </div>
        </div>
        <Bottom />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    login: state.login
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    add: payload => {
      dispatch(add(payload));
    },
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(createForm()(Login));
